<template>
  <div class="see-company">
    <div class="mycard">
      <el-form ref="form" :model="ruleForm" :rules="rules">
        <div class="tip-title">公司信息</div>
        <div class="box">
          <el-row :gutter="gutter">
            <el-col :span="span">
              <el-form-item label="公司名称：" prop="name">
                <span>{{ ruleForm.name }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="span">
              <el-form-item label="所在地区：" prop="countryRegion">
                <span>{{
                  this.getLabel(
                    ruleForm.countryRegion,
                    AreaOption,
                    "id",
                    "dname"
                  )
                }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="gutter">
            <el-col :span="span">
              <el-form-item label="公司类型：" prop="companyType">
                <span>{{
                  this.getLabel(
                    ruleForm.companyType,
                    companyOption,
                    "id",
                    "dname"
                  )
                }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="span">
              <el-form-item
                label="发票类型："
                prop="invioceType"
                v-if="ruleForm.countryRegion == 'FArea01'"
              >
                <span>{{
                  this.getLabel(
                    ruleForm.invioceType,
                    invioceOption,
                    "id",
                    "dname"
                  )
                }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="span">
              <el-form-item label="上传资料：" prop="pictrueIds">
                <div style="display: flex">
                  <div
                    v-for="item in ruleForm.files"
                    :key="item.id"
                    @mouseover="handleMouseover(item)"
                    @mouseleave="handleMouseleave(item)"
                    class="boxPic"
                  >
                    <img
                      :src="
                        item.fullPath.indexOf('.pdf') == -1
                          ? item.fullPath
                          : imagePdfUrl
                      "
                      class="avatar"
                    />
                    <div class="avatarL" v-if="item.isShow">
                      <i
                        class="el-icon-zoom-in"
                        @click="handlePictureCardPreview(item)"
                      ></i>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div class="tip-title">账户信息</div>
        <el-table
          border
          :data="tableData"
          :header-cell-style="{ textAlign: 'left' }"
        >
          <el-table-column prop="" label="币种">
            <template slot="header" slot-scope="scope">
              <span class="rule_red">*</span>币种
            </template>

            <template slot-scope="scope">
              <span>{{ currency_ }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="收款公司" v-if="ishowInfo1">
            <template slot="header" slot-scope="scope">
              <span class="rule_red">*</span>收款公司
            </template>
            <template slot-scope="scope">
              {{ ruleForm.CollectionCompany }}
            </template>
          </el-table-column>
          <el-table-column prop="" label="开户银行" v-if="ishowInfo1">
            <template slot="header" slot-scope="scope">
              <span class="rule_red">*</span>开户银行
            </template>
            <template slot-scope="scope">
              {{ ruleForm.openBank }}
            </template>
          </el-table-column>
          <el-table-column prop="" label="账号" v-if="ishowInfo1">
            <template slot="header" slot-scope="scope">
              <span class="rule_red">*</span>账号
            </template>
            <template slot-scope="scope">
              {{ ruleForm.accountNum }}
            </template>
          </el-table-column>
          <el-table-column
            prop=""
            label="银行地址"
            v-if="ruleForm.countryRegion == 'FArea03'"
          >
            <template slot-scope="scope">
              {{ ruleForm.bankAddress }}
            </template>
          </el-table-column>
          <el-table-column
            prop=""
            label="SwiftCode"
            v-if="ruleForm.countryRegion == 'FArea03'"
          >
            <template slot-scope="scope">
              {{ ruleForm.swiftCode }}
            </template>
          </el-table-column>
          <el-table-column
            prop=""
            label="中转银行"
            v-if="ruleForm.countryRegion == 'FArea03'"
          >
            <template slot-scope="scope">
              {{ ruleForm.transitBank }}
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
    <div class="mydiv">
      <el-button @click="handleReturn" class="resletBtn">取消</el-button>
    </div>
    <el-dialog :visible.sync="dialogVisible" class="eldialogVisible" :title="fileName">
      <img
        width="100%"
        :src="dialogImageUrl"
        alt=""
        v-if="dialogImageUrl.indexOf('.pdf') == -1"
      />
      <iframe
        :src="dialogImageUrl"
        height="500px;"
        width="100%"
        v-else
      ></iframe>
    </el-dialog>
  </div>
</template>

<script>
import {
  searchDistrict,
  companyDetail,
  updateBookAccount,
} from "@/api/myCompany.js";
import { Message } from "element-ui";
export default {
  name: "edit",
  data() {
    return {
      dialogVisible: false,
      dialogImageUrl: "",
      imagePdfUrl: require("../../../assets/images/pdf.png"),
      AreaOption: [], // 国别地区
      companyOption: [], // 公司类型
      natrueOption: [], // 企业性质
      invioceOption: [], // 发票类型
      currencyOption: [], // 注册币种
      originOption: [], // 国家地区
      AboradCurrencyOption: [], // 币种
      gutter: 24,
      span: 12,
      disabled: true,
      ruleForm: {
        //基本信息
        name: "",
        countryRegion: "", // 国别地区
        companyType: "",
        Natrue: "",
        invioceType: "",
        files: [],
        //工商信息
        Uscc: "",
        Corperation: "",
        RegistDate: "",
        RegistCurrency: "",
        RegistFund: "",
        Employees: "",
        BusinessState: "",
        RegAddress: "",
        BusinessScope: "",

        countryId: "",
        AboradCurrency: "",
        companyRegisteredAddress: "",

        //收款信息
        currency: "",
        CollectionCompany: "",
        openBank: "",
        accountNum: "",
        bankAddress: "",
        swiftCode: "",
        transitBank: "",
      },
      tableData: [],
      rules: {},
      fileName: ""
    };
  },
  computed: {
    ishowInfo1() {
      return this.ruleForm.currency == "2" || this.ruleForm.currency != "";
    },
    ishowInfo2() {
      return this.ruleForm.currency != "2" && this.ruleForm.currency != "";
    },
    currency_() {
      return this.getLabel(
        this.ruleForm.currency,
        this.currencyOption,
        "id",
        "dname"
      );
    },
  },
  mounted() {
    this.handleSelectChange();
    this.companyDetail();
  },
  methods: {
    handleMouseleave(item) {
      item.isShow = false;
    },
    handleMouseover(item) {
      item.isShow = true;
    },
    handlePictureCardPreview(item) {
      this.dialogVisible = true;
      this.dialogImageUrl = item.fullPath;
      this.fileName = item.fileName;
    },
    // code找label
    getLabel(val, arr, value, label) {
      let label_ = "";
      if (val && arr.length) {
        arr.forEach((item) => {
          if (item[value] == val) {
            label_ = item[label];
          }
        });
      }
      return label_;
    },
    handleSelectChange() {
      searchDistrict()
        .then((res) => {
          if (res.code == 200) {
            // 国别地区
            this.AreaOption = res.result.country_and_region;
            // 公司类型
            this.companyOption = res.result.supplier_type;
            // 企业性质
            this.natrueOption = res.result.enterprise_nature;
            // 发票类型
            this.invioceOption = res.result.invoice_type;
            // 注册币种
            this.currencyOption = res.result.currency;
            // 国家地区
            this.originOption = res.result.country_of_origin;
            // 币种
            this.AboradCurrencyOption = res.result.currency;
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    companyDetail() {
      let relationEnterpriseId = this.$route.query.relationEnterpriseId || "";
      if (relationEnterpriseId) {
        companyDetail({ relationEnterpriseId }).then((res) => {
          if (res.code == 200) {
            let result = res.result;
            // 基本信息
            this.$set(this.ruleForm, "name", result.name);
            this.$set(this.ruleForm, "countryRegion", result.countryRegion);
            this.$set(this.ruleForm, "companyType", result.companyType);
            this.$set(this.ruleForm, "Natrue", result.enterpriseNature);
            this.$set(this.ruleForm, "invioceType", result.invoicType);

            result.files && result.files.length &&
              result.files.forEach((item) => {
                item.isShow = false;
              });
            this.$set(this.ruleForm, "files", result.files);
            // 工商信息
            // 国内
            this.$set(this.ruleForm, "Uscc", result.uscc);
            this.$set(this.ruleForm, "Corperation", result.legalRepresentative);
            this.$set(
              this.ruleForm,
              "RegistDate",
              new Date(result.incorporation).toLocaleString()
            );
            this.$set(this.ruleForm, "RegistCurrency", result.registerCurrency);
            this.$set(this.ruleForm, "RegistFund", result.registeredCapital);
            this.$set(this.ruleForm, "Employees", result.numberOfEmployees);
            this.$set(this.ruleForm, "BusinessState", result.businessStatus);
            this.$set(
              this.ruleForm,
              "RegAddress",
              result.companyRegisteredAddress
            );
            this.$set(this.ruleForm, "BusinessScope", result.natureOfBusiness);
            // 除国内
            this.$set(this.ruleForm, "countryId", result.countryNameId);
            this.$set(this.ruleForm, "AboradCurrency", result.registerCurrency);
            this.$set(
              this.ruleForm,
              "companyRegisteredAddress",
              result.companyRegisteredAddress
            );
            // 收款信息
            this.tableData = result.myCompanyCollectionInformationPojo || [];
            this.$set(this.ruleForm, "currency", result.currencyId);
            this.$set(
              this.ruleForm,
              "CollectionCompany",
              result.receivingCompany
            );
            this.$set(this.ruleForm, "openBank", result.bankOfDeposit);
            this.$set(this.ruleForm, "accountNum", result.accountNumber);
            this.$set(this.ruleForm, "bankAddress", result.bankAddress);
            this.$set(this.ruleForm, "swiftCode", result.swiftCode);
            this.$set(this.ruleForm, "transitBank", result.transitBank);
          }
        });
      }
    },
    //取消
    handleReturn() {
      this.$router.push("/myCompany");
    },
    // 保存
    saveInfo() {
      let {
          currency,
          accountNum,
          openBank,
          bankAddress,
          CollectionCompany,
          swiftCode,
          transitBank,
        } = this.ruleForm,
        data = {};
      let id = this.$route.query.relationEnterpriseId || "";

      if (!currency) {
        // 币种
        Message({
          message: "请选择币种",
          type: "error",
        });
        return;
      }
      if (!CollectionCompany) {
        // 收款公司
        Message({
          message: "请填写收款公司",
          type: "error",
        });
        return;
      }
      if (!openBank) {
        // 开户银行
        Message({
          message: "请填写开户银行",
          type: "error",
        });
        return;
      }
      if (!accountNum) {
        // 账号
        Message({
          message: "请填写账号",
          type: "error",
        });
        return;
      }

      // 人民币
      if (this.ruleForm.currency == "2") {
        data = {
          id, // 账号
          currencyId: currency, // 币种
          receivingCompany: CollectionCompany, // 收款公司
          bankOfDeposit: openBank, // 开户银行
          accountNumber: accountNum, // 账号

          bankAddress: "", // 银行地址
          transitBank: "", // 中转银行
          swiftCode: "", // swiftCode
        };
      } else {
        // 非人民币
        data = {
          id, // 账号
          currencyId: currency, // 币种
          receivingCompany: CollectionCompany, // 收款公司
          bankOfDeposit: openBank, // 开户银行
          accountNumber: accountNum, // 账号
          bankAddress, // 银行地址
          transitBank, // 中转银行
          swiftCode, // swiftCode
        };
      }
      updateBookAccount(data).then((res) => {
        if (res.code == 200) {
          Message({
            message: res.message || "修改成功",
            type: "success",
          });
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
@import "../../../assets/styles/myCompany.scss";
</style>